<script setup>
import { ref, onMounted } from 'vue'

const items = ref([]) // 存储 swiper_item 的数据
const index = ref(0) // 当前显示的索引
const startX = ref(0) // 记录触摸起始点的 X 坐标
const deltaX = ref(0) // 记录触摸移动的距离

// swiper切换
function swiperItemClick(e) {
    index.value = e
    layout()
}

// figure切换
function figureClick(e) {
    index.value = e
    layout()
}

function btnClick(e) {
    if (e === 1) {
        index.value--
        if (index.value < 0) index.value = 0
    }
    if (e === 2) {
        index.value++
        if (index.value > items.value.length - 1) {
            index.value = items.value.length - 1
        }
    }
    layout()
}

function touchStart(e) {
    startX.value = e.touches[0].clientX // 记录触摸起始点
}

function touchMove(e) {
    deltaX.value = e.touches[0].clientX - startX.value // 计算移动距离
}

function touchEnd() {
    if (deltaX.value > 50) {
        // 向右滑动
        index.value--
        if (index.value < 0) index.value = 0
    } else if (deltaX.value < -50) {
        // 向左滑动
        index.value++
        if (index.value > items.value.length - 1) {
            index.value = items.value.length - 1
        }
    }
    layout() // 更新布局
    deltaX.value = 0 // 重置移动距离
}

function layout() {
    const offsetStep = 45 // 每个 item 的偏移量
    const scaleStep = 0.8 // 每个 item 的缩放比例
    for (let i = 0; i < items.value.length; i++) {
        const item = items.value[i]
        const dis = i - index.value // 下标距离
        let xOffset = dis * offsetStep // x 轴偏移量
        const sign = Math.sign(dis)
        if (i !== index.value) {
            xOffset = xOffset + 45 * sign
        }

        const scale = scaleStep ** Math.abs(dis) // 缩放比例
        item.style = {
            zIndex: items.value.length - Math.abs(dis),
            transform: `translateX(${xOffset}px) scale(${scale})`,
        }
    }
}

// 初始化 items 数据
const initializeItems = () => {
    items.value = Array.from({ length: 5 }, (_, i) => ({
        id: i,
        style: {}, // 每个 item 的样式
        color: ['red', 'pink', 'skyblue', 'greenyellow', 'springgreen'][i], // 每个 item 的背景颜色
    }))
}

onMounted(() => {
    initializeItems() // 初始化 items 数据
    layout() // 初始化布局
})
</script>

<template>
    <div class='figureSwiper'>
        <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
            <div class="swiper_item" v-for="item, subIndex in items" @click="swiperItemClick(subIndex)" :key="item.id"
                :style="item.style" :class="`bg-${item.color}`">
            </div>
        </div>
        <div class="selectFigure">
            <div class="figure_item" :class="{ active: index === subIndex }" v-for="item, subIndex of items"
                @click="figureClick(subIndex)"></div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.figureSwiper {
    .swiper {
        position: relative;
        height: 792rpx;
        margin-top: 50rpx;

        .swiper_item {
            position: absolute;
            top: 0;
            left: 50%;
            width: 438rpx;
            height: 100%;
            margin-left: -219rpx;
            transition: all 0.5s;
            border-radius: 15rpx;
        }

        .bg-red {
            background-color: red;
        }

        .bg-pink {
            background-color: pink;
        }

        .bg-skyblue {
            background-color: skyblue;
        }

        .bg-greenyellow {
            background-color: greenyellow;
        }

        .bg-springgreen {
            background-color: springgreen;
        }
    }

    .selectFigure {
        display: flex;
        align-items: center;
        gap: 26rpx;
        overflow-x: scroll;
        margin-top: 57rpx;

        .figure_item {
            box-sizing: border-box;
            width: 118rpx;
            height: 165rpx;
            border-radius: 12rpx;
            background-color: #6d6d6d;

            &:first-child {
                margin-left: 30rpx;
            }

            &.active {
                border: 3rpx solid #83CD88;
            }
        }
    }

}
</style>